<template>
  <div class="site-window" @click.stop="fadeWin(false)">
    <div class="win-content" @click.stop="fadeWin(true)">
      <div class="content-wrapper">
        <div class="content-header">
          <p>关系详情</p>
          <a class="closebtn el-icon-circle-close" @click.stop="fadeWin(false)" title="关闭"></a>
        </div>
        <div class="content-main">
          <div class="info">
            <div class="item">
              <div class="img-wrapper">
                <img :src="imgUrl+data['info']['target']['id']" alt="">
              </div>
              <p>
                <span :class="['sex', data['info']['target']['sex']]">{{data['info']['target']['name']}}</span>
                <span>{{data['info']['target']['age']}}</span>
              </p>
            </div>
            <div class="line-wrapper">
              <div class="line">{{data['info']['rela']}}</div>
            </div>
            <div class="item">
              <div class="img-wrapper">
                <img :src="imgUrl+data['info']['source']['id']" alt="">
              </div>
              <p>
                <span :class="['sex', data['info']['source']['sex']]">{{data['info']['source']['name']}}</span>
                <span>{{data['info']['source']['age']}}</span>
              </p>
            </div>
          </div>
          <ul class="list">
            <li class="li" v-for="(val, key) in data['list']" :key="key">
              <label>{{key}}</label>
              <span>{{val}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object
    },
    imgUrl: String
  },
  data () {
    return {}
  },
  methods: {
    fadeWin(off) {
      this.$emit('dialogOff', off)
    }
  }
}
</script>

<style lang="stylus" scoped>
$height = 100vh
$width = 100vw

.site-window{
  position fixed
  top 0 
  left 0
  width 100%
  min-width 1200px
  height 100%
  background-color rgba(0, 0, 0, .7)
  z-index 19
}
.win-content{
  position absolute 
  top 50%
  left 50%
  width 800px
  min-height 300px
  max-height 600px
  transform translateX(-50%) translateY(-50%)
  background url('../assets/img/bg-window.png') no-repeat center
  background-size 100% 100%
  overflow-y auto
  .content-wrapper{
    padding (10/760) * 100%
  }
}
.content-header{
  position relative
	width: 100%;
	height: 36px;
  line-height 36px;
  color #ffffff
	background-color: rgba(0, 38, 169, .4);
  p{
    font-size 16px
    color #0febff
    padding 0 10px
  }
  .closebtn{
    position absolute
    top: 9px
    right: 10px
    color: #ffffff
    font-size: 18px
    transition: .4s all
    cursor pointer
    &:hover{
      color: #409EFF
    }
  }
}
.content-main{
  .info{
    margin 20px 0
    text-align center
    .item{
      display inline-block
      color #ffffff
      font-size 14px
      text-align center
      vertical-align middle
    }
    .img-wrapper{
      position relative
      width 100px
      height 100px
      // line-height 100px
      border-radius 50%
      overflow hidden
      // text-align center
      // vertical-align middle
      img{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        width 100%
        vertical-align middle
      }
    }
    .sex{
      margin-right 5px
      &:after{
        display inline-block
        content: ''
        width: 24px
        height 24px
        vertical-align: middle
      }
      &.men:after{
        background: url('../assets/img/icon-men.png') no-repeat center
        background-size: 100% 100%
      }
      &.women:after{
        background: url('../assets/img/icon-famle.png') no-repeat center
        background-size: 100% 100%
      }
    }
  }
  .line-wrapper{
    display inline-block
    padding-bottom 14px
    vertical-align middle
    &:after, &:before{
      display inline-block
      content ''
      width 70px
      height 4px
      margin 0 6px
      background-color #00a0e9
      vertical-align middle
    }
    .line{
      position relative
      display inline-block
      width 50px
      height 22px
      line-height 22px
      color #ffffff
      font-size 14px
      background-color #00a0e9 
      vertical-align middle
      &:after, &:before{
        display inline-block
        content ''
        border-top: 11px solid transparent 
        border-bottom: 11px solid transparent 
        border-left: 8px solid #00a0e9
        vertical-align middle
      }
      &:before{
        position absolute
        top 0
        left -8px
        transform rotate(-180deg)
      }
      &:after{
        position absolute
        top 0
        right -8px
      }
    }
  }
  .list{
    padding 10px 15px
    .li{
      display inline-block
      width calc(100% / 3)
      padding 5px 0
      vertical-align middle
    }
    label{
      display inline-block
      width 90px
      font-size 14px
      color #b3b3b3
      word-break break-all
      vertical-align middle
    }
    span{
      display inline-block
      width calc(100% - 90px)
      font-size 14px
      color #ffffff
      padding-right 10px
      word-break break-all
      vertical-align middle
    }
  }
}
</style>